<template>
  <div id="admissionsguide" class="main">
    <div class="df">
      <div class="f14" style="margin-right: 10px">
        共 <span style="color: var(--color-text)">{{ total }}</span> 条
      </div>
      <div class="search-box">
        <el-popover
          placement="bottom-start"
          trigger="click"
          :visible="popperVis"
          popper-class="popoverStyle"
        >
          <template #reference>
            <el-input
              @focus="handleInputFocus"
              @blur="handleInputBlur"
              size="large"
              clearable
              :prefix-icon="Search"
              v-model="searchvalue"
              style="width: 100%"
              placeholder="搜索"
            >
              <template #append>
                <!-- style="background: var(--background-color); color: #fff" -->
                <el-button size="large" @click="handleTbaleSearch"
                  >搜索</el-button
                >
                <!-- <div class="my-btn">搜索</div> -->
              </template>
            </el-input>
          </template>

          <div class="curr">
            <div class="his-item" v-for="item in searchHistory" :key="item">
              {{ item }}
            </div>
          </div>
        </el-popover>
      </div>
    </div>
    <div v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
      <div v-for="item in schoolZS" :key="item.strId" class="df item-box">
        <div class="title-box curr" @click="handleLookDet(item)">
          {{ item.title }}
        </div>
        <div class="right f14">
          <div style="margin-right: 30px">{{ item.hits }}次浏览</div>
          <div>{{ item.createdAt.match(/^\d{4}-\d{2}-\d{2}/)[0] }}</div>
        </div>
      </div>
      <div style="margin: 20px 0 150px 0; text-align: center" class="f14">
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">以上为全部</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { getSchoolZS } from '@/api/collegeDetails/collegeDetails';
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const searchHistory = ref([]);
const searchvalue = ref('');
const route = useRoute();
const disabled = computed(() => loading.value || noMore.value);
const loading = ref(false);
const noMore = computed(() => moveData.value.length < 6);
const requestData = ref({
  code: '',
  page: '1',
  pageSize: '20',
});

const total = ref(0);
const popperVis = ref(false);
const schoolZS = ref([]);
const moveData = ref([]);
requestData.value.code = route.query.collegecode || '';
const fetchSchoolZS = () => {
  loading.value = true;
  getSchoolZS(requestData.value).then((res) => {
    if (res.data.code == 20000) {
      moveData.value = res.data.data;
      total.value = res.data.total;
      loading.value = false;
      schoolZS.value = [...schoolZS.value, ...res.data.data];
    }
  });
};
fetchSchoolZS();

const load = () => {
  requestData.value.page++;
  fetchSchoolZS();
};
const handleLookDet = (item) => {
  router.push({
    path: '/college/admissionsguide/det',
    query: { collegecode: requestData.value.code, id: item.id },
  });
};
const handleTbaleSearch = () => {
  requestData.value.page = 1;
  schoolZS.value = [];
  requestData.value.keywords = searchvalue.value;
  searchHistory.value.push(searchvalue.value);
  fetchSchoolZS();
};
const handleInputFocus = () => {
  if (searchHistory.value.length <= 0) {
    popperVis.value = false;
  } else {
    popperVis.value = true;
  }
};
const handleInputBlur = () => {
  popperVis.value = false;
};
</script>

<style lang="scss" scoped>
.item-box {
  justify-content: space-between;
  height: 60px;
  border-bottom: 1px solid #f2f2f2;
}
.title-box {
  &:hover {
    color: var(--color-text);
  }
}
.search-box {
  flex: 1;
  margin: 10px 0;
}
.his-item {
  padding: 5px 0 5px 25px;
  margin: 10px 0;
  &:hover {
    background: #f3f6f9;
  }
}
:deep(.el-input-group__append) {
  width: 70px;
  background: var(--background-color);
  color: #fff;
}
</style>
<style lang="scss">
.el-popover.popoverStyle {
  padding: 0 0 !important;
  // left: 350px !important;
}
</style>
